<template>
  <!-- 个人信息 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
    </h1>
    <div class="userinfo-wrapper-h5">
      <el-form :model="form" ref="passwordFormRef" label-position="top" class="mine-h5-popup-content" size="small">
        <el-form-item class="z-form-item-flex" :label="t('userData.title1')">
          <el-input v-model="form.userName" :disabled="true" :placeholder="t('userData.title1')" />
          <span class="form-copy-h5" @click="copy(form.userName)">{{ t('inviteFriend.text11') }}</span>
        </el-form-item>
        <el-form-item class="z-form-item-flex" :label="t('UserInfo.Nickname')">
          <el-input v-model="form.nickName" :placeholder="t('UserInfo.Nickname')" />
          <span class="form-copy-h5" @click="copy(form.nickName)">{{ t('inviteFriend.text11') }}</span>
        </el-form-item>
        <el-form-item :label="t('userData.title2')" class="z-form-item-flex-tips">
          <el-input v-model="form.name" :disabled="form.name" :placeholder="t('userData.title2')" />
          <div class="userinfo-h5-tips">・{{ t('userData.tip1') }}</div>
        </el-form-item>
        <el-form-item :label="t('userData.title3')" class="z-form-item-flex-tips">
          <el-date-picker
            v-model="form.birth"
            type="date"
            :placeholder="t('userData.title3')"
            :readonly="currentUserInfo.birth"
          />
          <div class="userinfo-h5-tips">・{{ t('userData.tip2') }}</div>
        </el-form-item>
        <el-form-item :label="t('userData.title13')">
          <el-input v-model="form.facebook" :placeholder="t('userData.title13')" />
        </el-form-item>
        <el-form-item :label="t('userData.title14')">
          <el-input v-model="form.telegram" :placeholder="t('userData.title14')" />
        </el-form-item>
        <el-form-item :label="t('userData.title4')">
          <el-input v-model="form.wx" :placeholder="t('userData.title4')" />
        </el-form-item>

        <el-form-item :label="t('userData.title5')" v-if="form.phone" prop="phone" class="z-form-item-flex-tips">
          <dl class="record-form-dl">
            <dd class="record-form-item">
              <div class="record-form-item-input-readonly">
                <span><img :src="piniaSystem.getLang.resource" alt=""> {{ form.area }} {{form.phone}}</span>
                <el-button type="primary" @click="changePhoneOrEmail('phone')">{{t('userData.change')}}</el-button>
              </div>
            </dd>
          </dl>
        </el-form-item>

        <!-- 手机号 绑定 -->
        <el-form-item :label="t('userData.title5')" v-if="!form.phone" prop="editPhone">
          <dl class="record-form-dl">
            <dd class="record-form-item">
              <div class="record-form-item-input-readonly">
                <el-dropdown trigger="click" @command="handleAreaCommand">
                  <span class="record-form-dropdown-link">
                    <img :src="currentArea.icon" alt=""> {{ currentArea.name }}
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="item" v-for="item in langList" :key="item.id" class="record-form-dropdown-list">
                        <img :src="item.icon" alt=""> {{ item.name }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-input class="z-no-border" v-model="form.editPhone" />
              </div>
            </dd>
          </dl>
          <div class="userinfo-h5-tips">・{{ t('userData.tip4') }}</div>
        </el-form-item>
        <!-- 手机号 绑定 验证码 -->
        <el-form-item :label="t('userData.title6')"  v-if="!form.phone" prop="phoneCode">
          <dl class="record-form-dl">
            <dd class="record-form-item">
              <div class="record-form-item-input-readonly">
                <el-input class="z-no-border" v-model="form.phoneCode" />
                <el-button type="primary" @click="getCodeForChangePhone">{{t('home.PhoneGetCode')}}</el-button>
              </div>
            </dd>
          </dl>
          <div class="userinfo-h5-tips">・{{ t('userData.rule5') }}</div>
        </el-form-item>

        <el-form-item :label="t('userData.title7')" class="z-form-item-flex-tips">
          <dl class="record-form-dl">
            <dd class="record-form-item">
              <div class="record-form-item-input-readonly">
                <span>{{form.email}}</span>
                <el-button type="primary" @click="changePhoneOrEmail('email')">{{t('userData.change')}}</el-button>
              </div>
            </dd>
          </dl>
          <!-- <div class="userinfo-h5-tips">・{{ t('userData.rule7') }}</div> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="h5-popup-search-button" @click="addUserPersonal">{{t('userData.saveBtn')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <van-popup
    v-model:show="dialogPhoneEmail.show"
    position="bottom"
  >
    <div class="change-phone-email-dialog">
      <h3 v-if="showOne">{{dialogPhoneEmail.type === 'phone' ? `${t('userData.currentPhone')}: ${currentUserInfo.phone}` : `${t('userData.currentEmail')}: ${currentUserInfo.email}`}}</h3>
      <el-form :model="changePhoneEmailForm" v-if="showOne" ref="changePhoneEmailFormRef" label-position="left" :rules="changePhoneEmailFormRules">
        <!-- 手机验证码 -->
        <el-form-item prop="phoneCode" class="form-input-code" v-if="dialogPhoneEmail.type === 'phone'">
          <el-input autocomplete="off" v-model="changePhoneEmailForm.phoneCode" :placeholder="t('login.verifiyInput')" />
          <el-button type="primary" size="large" @click="getCodeForChangePhone" :disabled="getChangePhoneDisabled">{{ getChangePhoneCodeTxt }}</el-button>
        </el-form-item>
        <!-- 邮箱验证码 -->
        <el-form-item prop="emailCode" class="form-input-code" v-if="dialogPhoneEmail.type === 'email'">
          <el-input autocomplete="off" v-model="changePhoneEmailForm.emailCode" :placeholder="t('login.verifiyInput')" />
          <el-button type="primary" size="large" @click="getCodeForChangeEmail" :disabled="getChangeEmailDisabled">{{ getChangeEmailCodeTxt }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="header-mine-search__btns" :loading="loading.changePhoneEmailLoading" @click="handleChangePhoneEmail(dialogPhoneEmail.type)" >{{t('WALLET.sure')}}</el-button>
        </el-form-item>
      </el-form>

      <!-- 更换手机第二屏 -->
      <el-form :model="changePhoneEmailForm" v-if="!showOne && dialogPhoneEmail.type === 'phone'" ref="twoPhoneRef" label-position="left" :rules="twoPhoneRules">
        <!-- 手机验证码 -->
        <el-form-item prop="phoneOrEmail" class="form-input-code" v-if="dialogPhoneEmail.type === 'phone'">
          <el-dropdown trigger="click" @command="handleAreaCommand2">
            <span class="record-form-dropdown-link">
              <img :src="currentArea2.icon" alt=""> {{ currentArea2.name }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item :command="item" v-for="item in langList" :key="item.id" class="record-form-dropdown-list">
                  <img :src="item.icon" alt=""> {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-input autocomplete="off" v-model="changePhoneEmailForm.phoneOrEmail" :placeholder="t('userData.rule4')" />
        </el-form-item>
        <el-form-item prop="code" class="form-input-code" v-if="dialogPhoneEmail.type === 'phone'">
          <el-input autocomplete="off" v-model="changePhoneEmailForm.code" :placeholder="t('userData.rule5')" />
          <el-button type="primary" size="large" @click="getCodeForChangePhone2" :disabled="getChangePhoneDisabled2">{{ getChangePhoneCodeTxt2 }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="header-mine-search__btns" :loading="loading.changePhoneEmailLoading" @click="findUserPhoneAndEmail(dialogPhoneEmail.type)" >{{t('WALLET.sure')}}</el-button>
        </el-form-item>
      </el-form>


      <!-- 更换邮箱第二屏 -->
      <el-form :model="changePhoneEmailForm" v-if="!showOne && dialogPhoneEmail.type === 'email'" ref="twoEmailRef" label-position="left" :rules="twoEmailRules">
        <!-- 邮箱验证码 -->
        <el-form-item prop="phoneOrEmail" class="form-input-code" v-if="dialogPhoneEmail.type === 'email'">
          <el-input autocomplete="off" v-model="changePhoneEmailForm.phoneOrEmail" :placeholder="t('userData.title7')" />
          <el-button type="primary" size="large" @click="getCodeForChangeEmail2" :disabled="getChangeEmailDisabled2">{{ getChangeEmailCodeTxt2 }}</el-button>
        </el-form-item>
        <el-form-item prop="code" class="form-input-code" v-if="dialogPhoneEmail.type === 'email'">
          <el-input autocomplete="off" v-model="changePhoneEmailForm.code" :placeholder="t('userData.EmailCode')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="header-mine-search__btns" :loading="loading.changePhoneEmailLoading" @click="findUserPhoneAndEmail(dialogPhoneEmail.type)" >{{t('WALLET.sure')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </van-popup>
</template>

<script setup lang="ts" name="UserInfoH5">
import loginApi from '@/api/modules/login';
import recordApi from '@/api/modules/record';
import userinfoApi from '@/api/modules/userinfo';
import nocache from '@/store/nocache';
import userinfo from '@/store/userinfo';
import system from '@/store/system';
import { countryCodeOptions } from '@/utils/constant';
import { copy } from '@/utils/format';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaNocache:any = nocache();
const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();
const global:any = getCurrentInstance()?.appContext.config.globalProperties;
const currentAreaArray = countryCodeOptions.filter((im:any)=>im.code == piniaSystem.getLang.code);
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});
const data:any = reactive({
  active: 1,
  form: {
  },
  digitalNum: 34,
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    width: 600,
    autoHeight: true
  },
  dialogPhoneEmail: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    width: 600,
    autoHeight: true
  },
  rules: {
    name: [
      { required: true, message: t('userData.rule1'), trigger: 'blur' },
    ],
    editPhone: [
      { required: true, message: t('userData.rule4'), trigger: 'blur' },
    ],
    phoneCode: [
      { required: true, message: t('rule5.rule5'), trigger: 'blur' },
    ],
  },
  currentArea: currentAreaArray.length > 0 ? currentAreaArray[0] : {},
  langList: [],
  changePasswordActive: "loginPassword",
  payWayActive: "third",
  loading: {
    resetPasswordLoading: false,
    upWithdrawPasswordLoading: false,
    changePhoneEmailLoading: false,
  },
  loginForm: {},
  resetRef: null,
  loginFormRules: {
    oldPassWord: [
      { required: true, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
      { min: 8, max: 16, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
    ],
    newPassword: [
      { required: true, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
      { min: 8, max: 16, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
    ],
    checkPassword: [
      { required: true, message: computed(()=>t('login.psdRule')), trigger: 'blur' },
      { validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error(t('login.enterAgain')))
        } else if (value !== loginForm.value.newPassword) {
          callback(t('login.diffrencePsd'))
        } else {
          callback()
        }
      }, trigger: 'blur' },
    ],
  },
  bindBankRules: {
    bankAccount: [
      { required: true, message: computed(()=>t('userData.chooseType')), trigger: 'change' },
    ],
    bankNumber: [
      { required: true, message: computed(()=>t('WALLET.AccountRule')), trigger: 'blur' },
      { validator: (rule: any, value: any, callback: any) => {
        if (value === '') {
          callback(new Error(t('WALLET.AccountRule')))
        } else if (bindBankForm.value.bankAccount === 'CPF' && !/^\d{11}$/.test(value)) {
          callback(t('userData.CPFRule'))
        } else if (bindBankForm.value.bankAccount === 'CNPJ' && !/^\d{14}$/.test(value)) {
          callback(t('userData.CNPJRule'))
        } else if (bindBankForm.value.bankAccount === 'EMAIL' && !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
          callback(t('Message.code_1001'))
        } else if (bindBankForm.value.bankAccount.indexOf('BSC') >= 0 && !/^[\d\w]{42}$/.test(value)) {
          callback(t('userData.inputWalletAddress').replace('#', `42`))
        }  else if (bindBankForm.value.bankAccount.indexOf('TRC') >= 0 && !/^[\d\w]{34}$/.test(value)) {
          callback(t('userData.inputWalletAddress').replace('#', `34`))
        } else {
          callback()
        }
      }, trigger: 'blur' },
    ],
  },
  twoPhoneRules: {
    phoneOrEmail: [
      { required: true, message: computed(()=>t('userData.rule4')), trigger: 'blur' },
    ],
    code: [
      { required: true, message: computed(()=>t('userData.rule5')), trigger: 'blur' },
    ],
  },
  twoEmailRules: {
    phoneOrEmail: [
      { required: true, message: computed(()=>t('userData.rule6')), trigger: 'blur' },
    ],
    code: [
      { required: true, message: computed(()=>t('userData.rule7')), trigger: 'blur' },
    ],
  },
  withdrawMoneyForm: {},
  withdrawMoneyRef: null,
  withdrawMoneyFormRules: {
    oldPassWord: [
      { required: true, message: t('userData.rule8'), trigger: 'blur' },
      { min: 8, max: 16, message: t('userData.rule8'), trigger: 'blur' },
    ],
    newPassword: [
      { required: true, message: t('login.psdRule'), trigger: 'blur' },
      { min: 8, max: 16, message: t('userData.rule8'), trigger: 'blur' },
    ],
  },
  bankOfThird: [],
  bankOfDigital: [],
  bindBankForm: {
    default: true
  },
  bankList: [
    {
      bankName: "CNPJ",
      bankAccount: "CNPJ"
    },
    {
      bankName: "CPF",
      bankAccount: "CPF"
    },
    {
      bankName: "EMAIL",
      bankAccount: "EMAIL"
    },
    {
      bankName: "PHONE",
      bankAccount: "PHONE"
    },
  ],
  currentUserInfo: {},
  digitalList: computed(()=> piniaUserinfo.getDigitalWallet.filter((im:any)=>im.platformType === 1)),
  changePhoneEmailForm: {},
  changePhoneEmailFormRef: null,
  changePhoneEmailFormRules: {
    code: [
      { required: true, message: t('login.verifiyRule'), trigger: 'blur' },
    ],
  },
  getChangeEmailCodeTxt: t('home.PhoneGetCode'),
  getChangeEmailDisabled: false,
  getChangePhoneCodeTxt: t('home.PhoneGetCode'),
  getChangePhoneDisabled: false,

  getChangeEmailCodeTxt2: t('home.PhoneGetCode'),
  getChangeEmailDisabled2: false,
  getChangePhoneCodeTxt2: t('home.PhoneGetCode'),
  getChangePhoneDisabled2: false,

  bindBankFormRef: null,
  keyId: "",
  showOne: true,

  twoPhoneRef: null,
  twoEmailRef: null,
  currentArea2: currentAreaArray.length > 0 ? currentAreaArray[0] : {},
});

const {
  active,
  form,
  digitalNum,
  dialogConfig,
  dialogPhoneEmail,
  rules,
  currentArea,
  langList,
  changePasswordActive,
  payWayActive,
  loading,
  loginForm,
  resetRef,
  twoPhoneRules,
  twoEmailRules,
  loginFormRules,
  withdrawMoneyForm,
  withdrawMoneyRef,
  withdrawMoneyFormRules,
  bankOfThird,
  bankOfDigital,
  bindBankForm,
  bankList,
  currentUserInfo,
  digitalList,
  changePhoneEmailForm,
  changePhoneEmailFormRef,
  changePhoneEmailFormRules,
  getChangeEmailCodeTxt,
  getChangeEmailDisabled,
  getChangePhoneCodeTxt,
  getChangePhoneDisabled,
  getChangeEmailCodeTxt2,
  getChangeEmailDisabled2,
  getChangePhoneCodeTxt2,
  getChangePhoneDisabled2,
  bindBankFormRef,
  bindBankRules,
  keyId,
  showOne,
  twoPhoneRef,
  twoEmailRef,
  currentArea2,
} = toRefs(data);


// 获取个人信息
const getUserPersonal = () => {
  recordApi.getUserPersonal({}).then((response:any)=>{
    if(response.code === 200){
      form.value = response.data || {};
      currentUserInfo.value = JSON.parse(JSON.stringify(response.data || {}));
    }
  })
}
getUserPersonal();

// 获取区域下拉
const getAreaList = () => {
  langList.value = countryCodeOptions.filter((im:any)=>{
    return piniaSystem.getLangList.some((ele:any)=>ele.code == im.code);
  });
}
getAreaList();

const handleAreaCommand = (v:any) => {
  currentArea.value = v;
}

const handleAreaCommand2 = (v:any) => {
  currentArea2.value = v;
}

// 切换
const handleActive = (index: number) => {
  active.value = index;
  if(active.value === 3){
    getUserBank(2);
  }
}


// 倒计时
const getCodeTimer = (txt: any, disable: any) => {
  let timer:any = null;
  let countdown:number = 59;
  if(timer){ return; }
  const callback = function(){
    if(countdown <= 0){
      txt.value = t('home.PhoneGetCode');
      disable.value = false;
      clearInterval(timer);
    }else{
      txt.value = countdown--;
    }
  }
  callback();
  timer = setInterval(callback, 1000);
}

// 更改邮箱code
const getCodeForChangeEmail = () => {
  getChangeEmailDisabled.value = true;
  getCodeTimer(getChangeEmailCodeTxt, getChangeEmailDisabled);
  loginApi.getEmailVerifiy({
    email: currentUserInfo.value.email
  }).then((response: any)=>{
    console.log(response)
    if(response.code === 200){
      global.message(response.msg);
    }
  });
}

// 更改手机code 这里需要保存一下 keyId
const getCodeForChangePhone = () => {
  getChangePhoneDisabled.value = true;
  getCodeTimer(getChangePhoneCodeTxt, getChangePhoneDisabled);
  loginApi.getPhoneVerifiy({
    phone: currentUserInfo.value.phone || form.value.editPhone
  }).then((response: any)=>{
    if(response.code === 200){
      keyId.value = response.msg;
    }
  });
}

// 更改邮箱code2
const getCodeForChangeEmail2 = () => {
  getChangeEmailDisabled2.value = true;
  getCodeTimer(getChangeEmailCodeTxt2, getChangeEmailDisabled2);
  loginApi.getEmailVerifiy({
    email: changePhoneEmailForm.value.email
  }).then((response: any)=>{
    if(response.code === 200){
      global.message(response.msg);
    }
  });
}

// 更改手机code2 这里需要保存一下 keyId
const getCodeForChangePhone2 = () => {
  getChangePhoneDisabled2.value = true;
  getCodeTimer(getChangePhoneCodeTxt2, getChangePhoneDisabled2);
  loginApi.getPhoneVerifiy({
    phone: changePhoneEmailForm.value.phone
  }).then((response: any)=>{
    if(response.code === 200){
      keyId.value = response.msg;
    }
  });
}

const resetChangePhoneEmailForm = () => {
  changePhoneEmailForm.value = {};
  keyId.value = "";
}

// 确认更改邮箱或者手机号码
const findUserPhoneAndEmail = (type: string) => {
  const RefWhich = type === 'phone' ? twoPhoneRef.value : twoEmailRef.value;
  RefWhich.validate((valid:any, fields:any) => {
    if (valid) {
      loading.value.changePhoneEmailLoading = true;
      loginApi.findUserPhoneAndEmail({
        code: changePhoneEmailForm.value.code,
        keyId: keyId.value,
        phoneOrEmail: changePhoneEmailForm.value.phoneOrEmail,
        type: 2,
      }).then((response: any)=>{
        if(response.code === 200){
          getUserPersonal();
          global.message(response.msg);
          dialogPhoneEmail.value.show = false;
          showOne.value = true;
        }
      }).finally(()=>{
        loading.value.changePhoneEmailLoading = false;
      })
    }
  });
}

// 修改手机或者而邮箱请求
const handleChangePhoneEmail = (type: string) => {
  changePhoneEmailFormRef.value.validate((valid:any, fields:any) => {
    if (valid) {
      loading.value.changePhoneEmailLoading = true;
      if(type === 'email'){
        loginApi.emailSendAuth({
          code: changePhoneEmailForm.value.emailCode,
          email: currentUserInfo.value.userName
        }).then((response:any)=>{
          if(response.code === 200){
            // 修改邮箱请求
            showOne.value = false;
          }
        }).finally(()=>{
          loading.value.changePhoneEmailLoading = false;
        });
      }else if(type === 'phone'){
        loginApi.sendAuth({
          code: changePhoneEmailForm.value.phoneCode,
          keyId: keyId.value
        }).then((response:any)=>{
            showOne.value = false;
          if(response.code === 200){
            // 修改手机请求
            showOne.value = false;
          }
        }).finally(()=>{
          loading.value.changePhoneEmailLoading = false;
        });
      }
    }
  });
}


// 选择钱包类型
const handleChangeBankAccount = (v: any) => {
  if(v.indexOf('BSC') >= 0){
    digitalNum.value = 42;
  }else if(v.indexOf('TSC') >= 0){
    digitalNum.value = 34;
  }
}

// 重置密码
const resetPassword = () => {
  resetRef.value.validate((valid:any, fields:any) => {
    if (valid) {
      loading.value.resetPasswordLoading = true;
      userinfoApi.resetPassword({
        newPassword: loginForm.value.newPassword,
        type: 1,
        userName: piniaUserinfo.getUserinfo.user.userName,
      }).then((response:any)=>{
        if(response.code === 200){
          global.message(response.msg)
        }
      }).finally(()=>{
        loading.value.resetPasswordLoading = false;
      });
    }
  });
}

// 取款密码
const upWithdrawPassword = () => {
  withdrawMoneyRef.value.validate((valid:any, fields:any) => {
    if (valid) {
      loading.value.upWithdrawPasswordLoading = true;
      userinfoApi.upWithdrawPassword({
        newPassword: withdrawMoneyForm.value.newPassword,
      }).then((response:any)=>{
        if(response.code === 200){
          global.message(response.msg);
        }
      }).finally(()=>{
        loading.value.upWithdrawPasswordLoading = false;
      });
    }
  });
}

// 修改手机号或者密码
const changePhoneOrEmail = (type: string) => {
  dialogPhoneEmail.value.show = true;
  dialogPhoneEmail.value.width = 400;
  dialogPhoneEmail.value.title = type === 'phone' ? t('userData.changePhone') : t('userData.changeEmail');
  dialogPhoneEmail.value.type = type;
  resetChangePhoneEmailForm();
  showOne.value = true;
}

// 打开绑定银行卡
const bandBank = (type: string) => {
  dialogConfig.value.show = true;
  dialogConfig.value.width = 400;
  if(type === 'third'){
    dialogConfig.value.title = t('userData.thirdPay');
  }else if(type === 'digital'){
    dialogConfig.value.title = t('userData.currencyNum');
  }
  bindBankForm.value = {
    default: true
  };
}

// 绑定银行卡
const bindBank = () => {
  bindBankFormRef.value.validate((valid:any, fields:any) => {
    if (valid) {
      let bankType = 2;
      if(payWayActive.value === 'third'){
        bankType = 2;
      }
      if(payWayActive.value === 'digital'){
        bankType = 1;
      }
      userinfoApi.addUserBank({
        bankAccount: bindBankForm.value.bankAccount,
        bankArea: piniaSystem.getLang.countryCode,
        bankDefault: bindBankForm.value.default ? 1 : 0,
        bankNumber: bindBankForm.value.bankNumber,
        bankType: bankType,
      }).then((response:any)=>{
        if(response.code === 200){
          getUserBank(bankType);
          dialogConfig.value.show = false;
        }
      })
    }
  });
}

// 获取银行卡
const getUserBank = (bankType: number) => {
  userinfoApi.getUserBank({
    bankType: bankType
  }).then((response:any)=>{
    console.log(response);
    if(response.code === 200){
      response.data.forEach((element:any) => {
        element.default = element.bankDefault === 1 ? true : false;
      });
      console.log("获取",  response.data)
      if(bankType === 2){
        bankOfThird.value = response.data || [];
      }else if(bankType === 1){
        bankOfDigital.value = response.data || [];
      }
    }
  })
}

// 银行切换
const handleBankTab = () => {
  if(payWayActive.value === "third"){
    piniaUserinfo.setDigitalWallet();
    getUserBank(2);
  }else if(payWayActive.value === "digital"){
    piniaUserinfo.setDigitalWallet('1005');
    getUserBank(1);
  }
}

// 绑定默认
const handleSetDefaultBank = (val: any, bank: any) => {
  userinfoApi.upUserBank(Object.assign(bank, {
    bankDefault: 1
  })).then((response: any)=>{
    if(response.code === 200){
      global.message(response.msg);
      getUserBank(bank.bankType);
    }
  });
}

// 解绑
const unbind = (bank: any) => {
  userinfoApi.upUserBank(Object.assign(bank, {
    flag: 1
  })).then((response: any)=>{
    if(response.code === 200){
      global.message(response.msg);
      getUserBank(bank.bankType);
    }
  });
}

// 个人信息保存
const addUserPersonal = () => {
  piniaNocache.setLoading(true);
  recordApi.addUserPersonal(Object.assign({}, form.value, {
    phone: form.value.editPhone || form.value.phone,
    userId: parseInt(form.value.userId),
    phoneCode: changePhoneEmailForm.value.phoneCode || form.value.phoneCode || "0",
    emailCode: changePhoneEmailForm.value.emailCode || "0",
  })).then((response:any)=>{
    console.log("个人信息保存",response)
    if(response.code === 200){
      global.message(response.msg);
      getUserPersonal();
    }
  }).finally(()=>{
    piniaNocache.setLoading(false);
  });
}










const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);

.record-form-dl{
  display: flex;
  width: 100%;
  align-items: center;
  .record-form-item{
    width: 100%;
  }
}
.record-form-item-input-readonly{
  height: var(--rem-40);
  border-radius: var(--rem-40);
  background-color: var(--z-bg-select-def) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-dropdown{
    width: var(--rem-100);
    span.record-form-dropdown-link{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0;
      img{margin-right: var(--rem-5);}
    }
  }
  &>span{
    padding-left: var(--rem-10);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    img{
      margin-right: var(--rem-5);
    }
  }
  button{
    width: auto;
    padding: 0 var(--rem-20);
    margin-right: var(--rem-5);
  }
}
.change-phone-email-dialog{
  padding: var(--rem-10) var(--rem-10) var(--rem-30);
  h3{
    color: var(--z-font-anti);
  }
}

.userinfo-wrapper-h5{
  img{
    width: var(--rem-20);
    height: var(--rem-20);
  }
}
</style>
